<template>
  <div class="dashboard">
    <!-- 统计指标卡 -->
    <el-row :gutter="20" class="mt-4 mb-6 px-2">
      <el-col :span="6" v-for="(card, index) in statsCards" :key="card.title">
        <el-card shadow="always" :class="'stat-card stat-card-' + index">
          <div class="stat-count">{{ card.count }}</div>
          <div class="stat-title">{{ card.title }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="mb-6 px-2">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">宠物增长趋势</div>
          <v-chart :option="petTrendOption" autoresize style="height: 300px;" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="chart-title">品种分布</div>
          <v-chart :option="petBreedOption" autoresize style="height: 300px;" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-card class="mb-6 mx-2" shadow="hover">
      <el-space>
        <el-button type="primary">添加宠物</el-button>
        <el-button type="success">新建体检记录</el-button>
        <el-button type="warning">导出报表</el-button>
      </el-space>
    </el-card>

    <!-- 最近活动 -->
    <el-card shadow="hover" class="mx-2">
      <template #header>
        <span class="table-title">最近活动</span>
      </template>
      <el-table :data="recentActivities" size="default" border stripe>
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="time" label="时间" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import 'echarts'

const statsCards = [
  { title: '宠物总数', count: 1523 },
  { title: '今日新增', count: 12 },
  { title: '体检记录', count: 894 },
  { title: '注册用户', count: 360 }
]

const petTrendOption = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [50, 80, 90, 70, 120, 140, 100],
      type: 'line'
    }
  ]
}

const petBreedOption = {
  series: [
    {
      type: 'pie',
      radius: '60%',
      data: [
        { value: 400, name: '拉布拉多' },
        { value: 300, name: '哈士奇' },
        { value: 300, name: '中华田园犬' },
        { value: 200, name: '边牧' },
        { value: 100, name: '其他' }
      ]
    }
  ]
}

const recentActivities = ref([
  { type: '登记', name: '旺财', time: '2025-05-20 10:22' },
  { type: '体检', name: '小花', time: '2025-05-20 09:18' },
  { type: '登记', name: '多多', time: '2025-05-19 17:30' }
])
</script>

<style scoped>
.dashboard {
  background-color: #f5f7fa;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 10px 20px 0px 20px;
}

.stat-count {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}

.stat-title {
  color: #f0f0f0;
  font-size: 14px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
}

.table-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.el-row+.el-row {
  margin-top: 20px;
}

.stat-card-0 {
  background: linear-gradient(135deg, #42a5f5, #1e88e5);
  color: white;
  box-shadow: 0 2px 12px rgba(66, 165, 245, 0.3);
}

.stat-card-1 {
  background: linear-gradient(135deg, #66bb6a, #43a047);
  color: white;
  box-shadow: 0 2px 12px rgba(102, 187, 106, 0.3);
}

.stat-card-2 {
  background: linear-gradient(135deg, #ffa726, #fb8c00);
  color: white;
  box-shadow: 0 2px 12px rgba(255, 167, 38, 0.3);
}

.stat-card-3 {
  background: linear-gradient(135deg, #ab47bc, #8e24aa);
  color: white;
  box-shadow: 0 2px 12px rgba(171, 71, 188, 0.3);
}
</style>